<template>
    <div class="page">
        <div class="main-title">
            <span>申请额度</span>
        </div>

        <div class="page-ctx">
            
            <div class="center" v-if="!resultFlag">
                
                <div class="item-list">
                    <div class="width150">当前授信额度：</div>
                    <el-input class="width469"  type="text" disabled  v-model="companyLimit.creditLimit" >
                        <template #prefix>
                            <span class="input-prefix">￥</span>
                        </template>
                    </el-input>
                </div>
                <div class="item-list">
                    <div class="width150">申请授信额度：</div>
                    <el-input class="width469"  type="text"   v-model="total" >
                        <template #prefix>
                            <span class="input-prefix">￥</span>
                        </template>
                    </el-input>
                </div>
                <div class="item-list">
                    <div class="width150"></div>
                    <div class="dialog-footer">
                        <el-button class=" fit-text "  @click="returnFunc">取消</el-button>
                        <el-button class="  fit-text  btn-bg"  @click="confirm" >提交</el-button>
                    </div>
                </div>

            </div>

            <div class="success-div" v-if="resultFlag">
                <img src="@/assets/img/newImg/sucessful.png" alt=""/>
                <div class="tips-text">提交成功，等待管理员审核！</div>
            </div>
        </div>

    </div>
</template>

<script>

import { mapState } from "vuex";
export default {
    components: {
    },
    data() {
        return {
            resultFlag:false,
            total:0,
            tabSelect: {
                title: "全部",
                value: 0,
            },

            pagination: {
                page: 1,
                pageNum: 100,
            },

            activeMenu: "address", // 当前选中的菜单
            list_address: [

            ],
            companyLimit:{
                creditLimit:0
            }

        };
    },
    computed: {
        ...mapState([""]),
    },
    created() {
        this.setView();
    },
    methods: {
        returnFunc(){
            return this.$router.go(-1);
        },
        setView() {
            this.$httpApi("/api/v1/purchaser/apply/limit/list", {
            }, "get").then(res => {
                this.companyLimit = res.data.companyLimit;
                
            }).catch(err => {
              alertErr(err.msg || '网络异常，请稍后重试！')
            })
        },
        confirm(){
            if (!/\d/.test(this.total) ) {
                alertErr('请输入有效的正整数额度');
                return;
            }

            this.$httpApi('/api/v1/purchaser/apply/limit', {
                limitMoneys: this.total
            },'post').then(res=> {
                if (res.code == 200) {
                    this.resultFlag = true;
                } else {
                    alertErr(res.msg || '网络异常，请稍后重试！')
                }
            }).catch(err => {
                alertErr(err.msg || '网络异常，请稍后重试！')
            })
        }
        
    },
};
</script>

<style scoped lang="less">


.input-prefix{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-list{
    display: flex;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 30px;
    margin-top: 20px;
    border-bottom: 0px solid #EBEBEB;
}
.width469{
    width: 469px;
}
.width150{
    width: 150px;
    text-align: right;
}

.tips-text{
    font-weight: bold;
    font-size: 20px;
    color: #333333;
    line-height: 20px;
}


.table-cell1 {
    padding-left: 10px;
    width: 10%;
}

.table-cell2 {
    width: 20%;
}

.table-cell3 {
    width: 20%;
}

.table-cell4 {
    width: 30%;
    line-height: 20px;
}

.table-cell4-num {
    color: #EF1F1F;
}

.table-cell5 {
    width: 20%;
    padding-right: 10px;

}

.table-body {
    width: 800px;
    height: 52px;
    background: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 52px;
    color: #333333;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EBEEF5;
}


.tab-box {
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    // border: 1px solid #cccccc;

    .tab-list {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 20px;
        color: #7d7d7d;

        .tab-item {
            position: relative;
            // min-width: 96px;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            height: 48px;
            line-height: 48px;
            cursor: pointer;
            margin-right: 20px;

            .number {
                color: #EF1F1F;
            }

            &.active {
                // background: #009F39;
                // color: #fff;
                // font-weight: bold;
                // color: #009f39;
                font-weight: 500;
                color: #EF1F1F;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 3px;
                    background: #EF1F1F;
                }
            }
        }
    }
}

.success-div{
    padding-top:150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
        width: 44px;
        height: 44px;
        margin-bottom: 20px;
    }
}

.page {
    text-align: left;
    padding-bottom: 80px;

    .main-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px;
        text-align: left;
        height: 56px;
        line-height: 56px;
        background: #ffffff;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;

        button {
            display: flex;
            align-items: center;
            min-width: 96px;
            height: 30px;
            line-height: 30px;
            background: #EF1F1F;
            color: #fff;
            background: #fff;
            color: #000000;
            font-size: 14px;
            // font-weight: bold;

            img {
                width: 20px;
            }

            .el-icon-circle-plus {
                font-size: 18px;
                color: #EF1F1F;
            }

            .add-text {
                margin-left: 5px;
            }
        }
    }

    .main-content {
        height: 124px;
        background-color: #fff;
        border-top: 1px solid #EAEEF1;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .main-content-img {
            width: 60px;
            height: 60px;
            margin-right: 10px;
        }

        .main-content-num {
            font-weight: bold;
            font-size: 28px;
            color: #484848;
        }

        .main-content-zero {
            font-size: 20px;
        }

        .main-content-tips {
            font-weight: 400;
            font-size: 14px;
            color: #606060;
        }
    }

    .page-ctx {
        margin-top: 24px;
        padding: 32px 32px 55px 32px;
        background: #fff;
        min-height: 500px;
    }

    .dialog-footer{


button {
      width: 120px;
      height: 32px;
      background: #FFFFFF;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #D5DBE8;
  
      font-family: Arial, Arial;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
  
      & + button {
        margin-left: 16px;
      }
    }
  
    .btn-bg {
      background: #044FA0;
      color: #fff;
    }
}
}

// 地址列表
.wrap-address {
    margin-top: 24px;
    text-align: left;

    .address-item {
        min-height: 190px;
        background: #ffffff;
        border: 1px solid #e5e5e5;
        padding: 20px;
        margin-bottom: 20px;

        .top {
            padding-bottom: 20px;

            >div {
                margin-bottom: 10px;
                color: #333333;

                &:last-child {
                    margin-bottom: 0;
                }

                span {
                    font-size: 14px;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #666666;
                }
            }
        }

        .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid #eeeeee;
            padding-top: 20px;

            .left {
                .moren {
                    display: inline-block;
                    width: 104px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    // background: rgba(255, 90, 0, 0.68);
                    background: #009F39;
                    font-size: 14px;
                    color: #ffffff;
                }
            }

            .right {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 20px;
                color: #009F39;

                .action {
                    margin-left: 20px;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>

<style scoped lang="less" src="@/assets/h5css/user/address-list.less"></style>